<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>管理入口-地图</title>
	
	<%@ include file="../common.jsp"%>
	<script type="text/javascript" src="${path }/static/mapService/js/jquery.mousewheel.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/pmap.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/mapInfo.js"></script>
	<script type="text/javascript" src="${path }/static/mapService/js/raphael-min.js"></script>
	
	<style type="text/css">
		#maptools{border:solid 1px #E4E4E4;float:right;padding-left:0px;border:none;margin-right:10px;position:absolute;right:0px;z-index:99999;}
		.mapbtn{position:relative;float:right;margin:2px;}
		#bt1{border-radius:0;box-shadow:0 0 8px gray;border:solid 1px #b3b3b3;}
		#map_info{position:absolute;z-index:9999}
	</style>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="2" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="../dev/left_navbar.jsp">
					<jsp:param value="2" name="active"/>
				</jsp:include>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
			<h3 class="page-header">设备定位</h3>
			<!-- 
			<div class="row" id="maptools">
				 <div class="mapbtn">
					<button id="bt1"  type="button" class="btn btn-default" onclick="map.changeDragMode('measure');">
						<img src="../static/mapService/images/icon/ruler.png"></img>	
						测距
					</button>
				 </div>
				 <div class="mapbtn">
					<button id="bt1"  type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						<img src="../static/mapService/images/icon/pen.png"></img>	
						绘图工具<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li>
							<a href="#" role="menuitem" onclick="map.changeDragMode('drawMarker',null,null,null,'../static/mapService/images/icon/icon.png');">
							<img src="../static/mapService/images/icon/icon.png"></img>
							绘制图标
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.changeDragMode('drawText',null,null,null);">
							<img src="../static/mapService/images/icon/text.png"></img>
							编辑文本
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="setPen(null,null,null,null,0,null);map.changeDragMode('drawPolyline',null,null,null);">	
							<img src="../static/mapService/images/icon/line.png"></img>	
							绘制直线
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="setPen(null,null,null,null,1,null);map.changeDragMode('drawPolyline',null,null,null);">
							<img src="../static/mapService/images/icon/arrow.png"></img>	
							绘制箭头
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.changeDragMode('drawCircle',null,null,null);">
							<img src="../static/mapService/images/icon/circle.png"></img>	
							绘制圆形
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.changeDragMode('drawRect',null,null,null);">
							<img src="../static/mapService/images/icon/rect.png"></img>	
							绘制矩形
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.changeDragMode('drawPolygon',null,null,null);">
							<img src="../static/mapService/images/icon/polygon.png"></img>	
							绘制多边形
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.removeOverlay(map.getCurrentEditor());">
							<img src="../static/mapService/images/icon/revoke.png"></img>	
							清除上一图标
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.clearOverlays();">
							<img src="../static/mapService/images/icon/clear_draw.png"></img>	
							清除所有图标
							</a>
						</li>
					</ul>
				</div>
				
				<div class="mapbtn">
					<button id="bt1"  type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
						<img src="../static/mapService/images/icon/magnifier.png"></img>
						地图操作<span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li>
							<a href="#" role="menuitem" onclick="map.zoomIn();">
							<img src="../static/mapService/images/icon/zoom_in.png"></img>
							放大
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.zoomOut();">
							<img src="../static/mapService/images/icon/zoom_out.png"></img>	
							缩小
							</a>
						</li>
						<li>
							<a href="#" role="menuitem" onclick="map.centerAndZoom(new Point(116.39,39.90),14);">
							<img src="../static/mapService/images/icon/center.png"></img>	
							重置
							</a>
						</li>
					</ul>
				</div> 
			</div> 
			  -->
				<!-- 地图工具 -->

				<div id="map" style="position: relative; left: 0px; width: 100%; height: 100%; min-height: 650px; margin: 0px auto; z-index: 1;margin-top: -20px;">
				</div>
				<!-- 地图 -->
				
				<div id="map_info" style="display:none;">
					<ul  class="list-group" style="width:200px">
						<li id="map_info_1" class="list-group-item"></li>
						<li id="map_info_2" class="list-group-item"></li>
						<li id="map_info_3" class="list-group-item"></li>
					</ul>
				</div>

			</div>

		</div>
	</div>

	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		var map;
		var devicesInfoArray;
		$(document).ready( function() {
			map = new EzMap("map");
			map.centerAndZoom(new Point(121.58433, 31.18665), 18);
			getAllDevices();
		});
		
		//从后台读取设备信息
		function getAllDevices(){
			$.ajax({
				type:"post",
				url:"getAllDevices",
				success:function(data){
					//用array保存devices数组对象
					devicesInfoArray = data.devices;
					$.each(data.devices, function(i, item){
						addDevice(item);
					});
				},
				error : function(error) {
					alert("getAllDevices 错误代码："+error.status+"。"+"错误内容:"+error.statusText+"。");
				}
			});
		}

		function addDevice(device) {
			if(null!=device.longitude&&null!=device.latitude) {
				var pIcon=new Icon();
				pIcon.image="../static/mapService/images/icon/location.png";
				pIcon.height=30;
				pIcon.width=22;
				var ptitle=null;
				if(device.devName!=null)
					ptitle= new Title(device.devName,14,7,"宋体","blue","white","gray",1);
				var pmarker=new Marker(new Point(device.longitude,device.latitude),pIcon,ptitle);
				//pmarker.showTitle();
				pmarker.disableEdit();
				pmarker.addListener("mouseover",device_onfocus);
				pmarker.addListener("mouseout",device_release);
				//添加事件
				map.addOverlay(pmarker);
				pmarker.disableEdit();
			}
		}
		
		function device_onfocus(e) {
			e = e || window.event;
			for(var i=0;i<devicesInfoArray.length;i++) {		
				if(e.srcElement.name==devicesInfoArray[i].devName) {
					$("#map_info").show()
					$("#map_info").css("left",lng_to_x(devicesInfoArray[i].longitude,map_current_layer)+$("#map").offset().left-250);
					$("#map_info").css("top",(lat_to_y(devicesInfoArray[i].latitude,map_current_layer)+$("#map").offset().top-80));		
					$("#map_info_1").html("名称："+devicesInfoArray[i].devName);
					$("#map_info_2").html("位置："+devicesInfoArray[i].addr);
					$("#map_info_3").html("MAC："+devicesInfoArray[i].macList);
					return;
				}
			}
		}

		function device_release(e) {
			e = e || window.event;
			for(var i=0;i<devicesInfoArray.length;i++) {		
				if(e.srcElement.name==devicesInfoArray[i].devName)
				{
					$("#map_info").hide()
					return;
				}
			}
		}
		
	</script>
</body>
</html>